<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>世贸·矩阵</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/popup.css">
		<link rel="stylesheet" type="text/css" href="css/swiper-4.2.6.min.css">
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 首页 -->
		<div class="homePage dn" style="display: block;">
			<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/yun1.png" class="yun1 abs" style="width: 6.24rem;">
			<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/yun2.png" class="yun2 abs" style="width: 7.58rem;">
			<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/yun3.png" class="yun3 abs" style="width: 7.58rem;">
			<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/ft.png" class="ft abs" style="width: 0.96rem;">
			<div class="inner">
				<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/enter.png" class="enter t_center" style="width: 12.19rem;">
				<div class="moveGroup">
					<img src="img/floor1.png" class="floor1 abs">
					<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/panda.png" class="panda abs" style="width: 2.51rem;">
					<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/ludeng.png" class="ludeng abs" style="width: 0.94rem;">
				</div>
				<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/zsp.png" class="zsp abs" style="width: 1.11rem;">
				<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/hulan.png" class="hulan abs" style="width: 3.37rem;">
				<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/word.png" class="word t_center" style="width: 3.2rem;">
			</div>
			<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/tiparrow.png" class="tiparrow abs" style="width: 0.21rem;">
			<div class="door1 t_center"></div>
		</div>
		<!-- 场景二门 -->
		<div class="page2 dn" >
			<div class="inner abs">
				<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/dingdeng.png" class="dingdeng t_center" style="width: 9.64rem;">
				<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/diban1.png" class="diban1 abs" style="width: 8.06rem;">
				<div class="door2Box t_center">
					<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/thb.png" class="thb abs" style="width: 6.76rem;">
					<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/diban2.png" class="diban2 t_center" style="width: 5.49rem;">
					<div class="doorL abs"></div>
					<div class="doorR abs"></div>
					<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/tip1.png" class="tip1 abs" style="width: 0.86rem;">
				</div>
			</div>
		</div>
		<!-- 场景三 -->
		<div class="page3" style="height: 0px;">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="container">
							<div class="thb1Box abs">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/thb1.png" class="p3_thb1 abs" style="width: 55.16rem;">
							</div>
							<div class="thb2Box abs">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/thb2.png" class="p3_thb2 abs" style="width: 28.15rem;">
							</div>
							<div class="bgrect abs"></div>
							<div class="bgrect2 abs"></div>
							<div class="part1 abs">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/db1.png" class="p3_db1 abs" style="width: 5.87rem;">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/db2.png" class="p3_db2 abs" style="width: 5.86rem;">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/jsb.png" class="jsb abs" style="width: 12.5rem;">
							</div>
							<div class="part2 abs">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/db3.png" class="p3_db3 abs" style="width: 7.96rem;">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/db4.png" class="p3_db4 abs" style="width: 7.95rem;">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/xmzb.png" class="p3_xmzb abs" style="width: 28.64rem;">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/zs1.png" class="p3_zs1 abs" style="width: 4.64rem;">
								<img src="img/tc/rl.png" class="p3_rL abs">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/tc/lL.png" class="p3_lL abs" style="width: 1.51rem;">
								<div class="p3_tfk abs">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/qp1.png" class="p3_qp1 abs" style="width: 0.29rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/qp2.png" class="p3_qp2 abs" style="width: 0.42rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/qp3.png" class="p3_qp3 abs" style="width: 0.18rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/qp4.png" class="p3_qp4 abs" style="width: 0.12rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/qp5.png" class="p3_qp5 abs" style="width: 0.1rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/qp6.png" class="p3_qp6 abs" style="width: 0.24rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/qp7.png" class="p3_qp7 abs" style="width: 0.11rem;">
								</div>
								<div class="zt abs">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/ztp1.png" class="p3_ztp1 abs" style="width: 1.49rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/ztp2.png" class="p3_ztp2 abs" style="width: 1.49rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/ztp3.png" class="p3_ztp3 abs" style="width: 1.49rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/ztp4.png" class="p3_ztp4 abs" style="width: 1.49rem;">
								</div>
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/xmjs.png" class="p3_xmjs abs" style="width: 20.02rem;">
							</div>
							<div class="part3 abs">
								<div class="gq abs">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/yf1.png" class="yf1 abs" style="width: 0.41rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/yf2.png" class="yf2 abs" style="width: 0.34rem;">
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/yf3.png" class="yf3 abs" style="width: 0.68rem;">
								</div>
							</div>
							<div class="part4 abs">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/db5.png" class="p3_db5 abs" style="width: 12.41rem;">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/db6.png" class="p3_db6 abs" style="width: 7.22rem;">
								<div class="p3_dpz1 abs"></div>
								<div class="p3_dpz2 abs"></div>
								<div class="ylzt abs">
									<span class="tipArow tipArow1 abs"></span>
									<a href="javascript:void(0);" class="photo1 abs"></a>
									<span class="tipArow tipArow2 abs"></span>
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/mp1.png" class="mp1 abs" style="width: 2rem;">
									<a href="javascript:void(0);" class="tc2Click abs">
										<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/sz.png" class="p3_sz abs" style="width: 0.09rem;">
										<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/fz.png" class="p3_fz abs" style="width: 0.09rem;">
									</a>
									<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/mp2.png" class="mp2 abs" style="width: 1.48rem;">
									<div class="hd1 abs"></div>
									<div class="hd2 abs"></div>
								</div>
							</div>
							<div class="part5 abs">
								<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/p3_dd.png" class="p3_dd t_center" style="width: 3.02rem;">
								<div class="inner abs">
									<div class="kjztDoor abs">
										<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/doorL.png" class="p3_doorL abs" style="width: 1.82rem;">
										<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/p3/doorR.png" class="p3_doorR abs" style="width: 1.82rem;">
									</div>
								</div>
								<img src="img/tip1.png" class="tip3 abs">
							</div>
							<img src="http://shimao.juzhen01.com/2017/cdsm0525/img/tip2.png" class="tip2 abs">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹窗部分 -->
		<div class="alert abs dn" id="alert1">
			<span class="close abs close1"></span>
			<span class="close abs close2"></span>
		</div>
		<div class="alert abs dn" id="alert2">
			<span class="close abs close1"></span>
			<span class="close abs close2"></span>
		</div>
		<!-- 音乐部分 -->
		<audio id="music" loop="loop" style="height:0;width:0;" src="audio/Crooked Still - Florence.mp3"></audio>
		<div class="musicBtn" id="musicBtn"></div>
		<script src="js/swiper-4.2.6.min.js"></script>
		<script src="js/swipercompute.js"></script>
		<script src='js/jquery-1.11.0.js'></script>
		<script src="js/index.js"></script>
		<script>
			//微信端自动播放
			var audio = document.getElementById('music');
				document.addEventListener("WeixinJSBridgeReady", function () {
					audio.play();
				}, false);
				// 音乐相关
			function initMusic() {
				var el = $("#music")
				if (el && el.length > 0 && el.attr("src")) {
					// 音乐相关
					var audio = document.getElementById('music');
					$('#musicBtn').on("touchstart", function (ev) {
						if (audio.paused) {
							audio.play();
							$(this).removeClass('pause');
						} else {
							audio.pause();
							$(this).addClass('pause');
						}
					});
					$(document).one('touchstart', function () {
						//audio.play();
					});
				}
			}
			initMusic(); 
		</script>
	</body>
</html>
